<template>
	<view class="flex" :style="item.driver.status==3?'opacity: 0.5':''">
			<view class="noselect-icon" v-if="!item.drsel" @click="selectdriver">
				
			</view>
			<view class="select-icon flex-content" v-else @click="selectdriver">
				<u-icon name="checkmark" color="#fff" size="28"></u-icon>
			</view>
            
			   <view class="m-l-36" style="width:600rpx ;">
			   	
			 <view class="status-content flex"  v-show="item.driver.status==3" >
			  	<view class="icon-my">
			  		
			  	</view>
			 				<view class="lg bold m-l-28" style="color: #E85631;">
			 					忙碌
			 				</view>
			 				<view class="m-l-36" style="color: #807E7E ;">
			 					司机忙碌状态，暂无法为您服务
			 				</view>
			  </view>
			   <view class="status-content flex" v-show="item.driver.status==1" >
			   	<view class="icon-my" style="background-color: #78BB81;">
			   		
			   	</view>
			   				<view class="lg bold m-l-28" style="color: #78BB81;">
			   					空闲
			   				</view>
			   				<view class="m-l-36" style="color: #807E7E ;">
			   					司机空闲状态
			   				</view>
			   </view>
			   
			   <view class="status-content flex" v-show="item.driver.status==2">
			   	<view class="icon-my" style="background-color: #4D8EFB;">
			   		
			   	</view>
			   				<view class="lg bold m-l-28" style="color: #4D8EFB;">
			   					休息中
			   				</view>
			   				<view class="m-l-36" style="color: #807E7E ;">
			   					司机休息状态，暂无法为您服务
			   				</view>
			   </view>
				<view class="flex bg-white p-t-40 p-b-40">
			
					<view class="dr-img flex-content m-l-36">
						<image :src="item.driver.avatar" mode="widthFix"></image>
					</view>
					<view class="m-l-36"  style="width: 400rpx;" >
						<view class="name-phone flex">
							<view class="name xxl bold ">
								{{item.driver.driver_name}}
							</view>
							<view class="car-type sm flex-content m-l-50">
								{{item.driver.car.carConfig.car_name}}
							</view>
						
						</view>
						<view class="m-r-20 sm m-t-32" style="color: #807E7E;">{{item.driver.mobile}}</view>
						
					</view>
				</view>
		
			  </view>
	
	</view>
</template>

<script>
	export default {
		name:"search-list",
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			selectdriver(){
				this.$emit("selectdriver",this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-icon{
		width: 40rpx;
		margin-left: 20rpx;
	
		height: 40rpx;
		border-radius: 30rpx;
		background-color: #E85631;
	}
	.noselect-icon{
		width: 40rpx;
		margin-left: 20rpx;
		height: 40rpx;
		border-radius: 30rpx;
		border: 4rpx solid #C3C3C3;
	}
	.on-time-btn{
		color: #E85631;
		width: 164rpx;
		height: 56rpx;
		border-radius: 10rpx;
		border: 2rpx solid #E85631;
	}
	.car-type{
		width: 114rpx;
		height: 48rpx;
		background-color: #FBF5E6;
		color: #E85631;
		border-radius: 6rpx;
		
	}
	.icon-my{
		width: 11rpx;
		margin-left: 25rpx;
		height: 40rpx;
		background-color: #E85631;
		border-radius: 8rpx;
	}
	.status-content{
	  width: 100%;
	  height: 86rpx;
	  background-image: linear-gradient(to right, #E0EBF9, #fff);
	}
	.collect-driver {
		background-color: #FFFFFF;
		width: 100%;
		height: 166rpx;
		border-radius: 20rpx;
		padding-top: 28rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 28rpx;
	}
	.name-phone {
	
		width: 460rpx;
	}
	.dr-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
		overflow: hidden;
	
		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.apply-time {
		width: 224rpx;
		height: 40rpx;
		border-radius: 12rpx;
		background-color: #F4F4F4;
		color: #807E7E;
	}
</style>
